<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>艾家艾产品线上销售平台</title>
    <link rel="shortcut icon" href="../img/favicon.ico">
    <link rel="stylesheet" href="../css/reset.css"/>
    <link rel="stylesheet" href="../css/affirm-indent.css"/>
    <script src="../them/jquery/jquery-1.7.2.js"></script>
    <script src="../them/city/Popt.js"></script>
    <script src="../them/city/cityJson.js"></script>
    <script src="../them/city/citySet.js"></script>
    <script src="../them/jquery/jquery.cookie.js"></script>
</head>
<body>
<!--头部-->
<div class="header">
    <div class="headercontent clearfix">
        <a href="index.html">
            <h1 class="fl"></h1>
        </a>

        <p class="fl title">
            确认订单信息
        </p>
        <a class="to_indent fr" href="indent.html">我的订单</a>
        <div class="user_name_box fr" >
            <span class="user_name"></span>
            <p class="user_name_b">
                <a href="personal-center.html">个人中心</a>
                <a href="user-favorite.html">我的喜欢</a>
                <a href="change-information.html" class="changeInfo">修改信息</a>
                <a href="indent.html" class="quit">退出登录</a>
            </p>
        </div>
    </div>
</div>
<!--中间-->
<div class="user-main">
    <div class="container">
        <div class="right-box">
                <div class="uc-box">
                    <div class="uc-content-box">
                        <div class="box-hd">
                            <h2 class="title">收获地址</h2>
                        </div>
                        <div class="box-bd">
                            <div class="user-address-list clearfix">
                                <div class="address-item address-item-new">
                                    <div class="add">+</div>
                                    <p>添加新地址</p>
                                </div>

                            </div>

                        </div>
                    </div>
                </div>
                <div class="box-list">
                    <ul>
                        <li class="clearfix">
                            <div class="fl left">
                                <p>支付方式</p>
                            </div>
                            <div class="fl right">
                                <p>在线支付（支持微信支付、支付宝、银联、财付通等）</p>
                            </div>
                        </li>
                        <li class="clearfix">
                            <div class="fl left">
                                <p>配送方式</p>
                            </div>
                            <div class="fl right">
                                <p>快递配送费（运费10元）</p>
                            </div>
                        </li>
                        <li class="clearfix">
                            <div class="fl left">
                                <p>配送时间</p>
                            </div>
                            <div class="fl right">
                                <div class="select">
                                    <a href="javascript:;" class="active">不限送货时间：周一至周日</a>
                                    <a href="javascript:;">工作日送货：周一至周五</a>
                                    <a href="javascript:;">双休日、假日送货</a>
                                </div>
                            </div>
                        </li>
                        <li class="clearfix" style="height: 100%;border: none">
                            <div class="fl left">
                                <p>发票</p>
                            </div>
                            <div class="fl right">
                                <div class="select">
                                    <a href="javascript:;" class="active">电子发票（非纸质）</a>
                                    <a href="javascript:;" class="border">普通发票（纸质）</a>
                                </div>
                                <input type="text" placeholder="个人/单位名称">
                                <p class="tittle">发票内容：购买商品明细</p>
                                <p class="fp">电子发票法律效力、就基本用途及使用规定用纸质发票。不随商品寄送<a href="javascipt:;" class="what"> 什么是电子发票?</a> </p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
    </div>
</div>
<div class="container_l">
    <div class="indent_box">
        <div class="title clearfix">
            商品
            <span class="fr">返回购物车 ></span>
        </div>
        <div class="indent_box_i">
            <!--<div class="indent clearfix">-->
                <!--<img class="fl" src="img/top.jpg" alt="">-->
                <!--<p class="fl indent_name">小米蓝牙耳机</p>-->
                <!--<ul class="fr">-->
                    <!--<li >53元×2</li>-->
                    <!--<li>有货</li>-->
                    <!--<li class="indent_pri">106元</li>-->
                <!--</ul>-->
            <!--</div>-->
        </div>

        <ul class="inventory">
            <li>商品件数:<span class="act_count">2件</span></li>
            <li>金额合计:<span class="total_price">106元</span></li>
            <li>活动优惠:<span>-0元</span></li>
            <li>优惠券抵扣:<span>-0元</span></li>
            <li>运费:<span>0元</span></li>
            <li class="inventory_count">应付总额<span class="total_price_z">10 <em>元</em></span></li>
        </ul>
        <div class="btn_box clearfix">
            <div class="fl delivery_text ">
                <!--<p>李亚培  188****8888  </p>-->
                <!--<p>北京  <span>修改</span></p>-->
            </div>
            <div class="btn fr go_pay">去结算</div>
        </div>
    </div>
</div>

<!--底部-->
<div class="footer">
    <div class="fuwu">
        <ul>
            <li>预约维修服务</li>
            <li>7天无理由退货</li>
            <li>15天免费换货</li>
            <li>满150元包邮</li>
            <li>520余家售后网点</li>
        </ul>
    </div>
    <div class="fuwu_det clearfix">
        <ul class="fl fuwu_det_item">
            <li class="fuwu_det_i fl">
                <p>帮助中心</p>
                <ul>
                    <li>账户管理</li>
                    <li>购物指南</li>
                    <li>订单操作</li>
                </ul>

            </li>
            <li class="fuwu_det_i fl">
                <p>帮助中心</p>
                <ul>
                    <li>账户管理</li>
                    <li>购物指南</li>
                    <li>订单操作</li>
                </ul>
            </li>
            <li class="fuwu_det_i fl">
                <p>帮助中心</p>
                <ul>
                    <li>账户管理</li>
                    <li>购物指南</li>
                    <li>订单操作</li>
                </ul>
            </li>
            <li class="fuwu_det_i fl">
                <p>帮助中心</p>
                <ul>
                    <li>账户管理</li>
                    <li>购物指南</li>
                    <li>订单操作</li>
                </ul>
            </li>
            <li class="fuwu_det_i fl">
                <p>帮助中心</p>
                <ul>
                    <li>账户管理</li>
                    <li>购物指南</li>
                    <li>订单操作</li>
                </ul>
            </li>
            <li class="fuwu_det_i fl">
                <p>帮助中心</p>
                <ul>
                    <li>账户管理</li>
                    <li>购物指南</li>
                    <li>订单操作</li>
                </ul>
            </li>
        </ul>
        <ul class="fl fuwu_det_tel">
            <li class="fuwu_det_num">400-100-5678</li>
            <li class="fuwu_det_time">周一至周日 8:00-18:00</li>
            <li class="fuwu_det_time">（仅收市话费）</li>
            <li class="fuwu_det_btn">24小时在线客服</li>
        </ul>
    </div>
    <div class="bottom clearfix">
        <div class="logo_b fl"></div>
        <div class="bottom_text fl">
            <ul>
                <li>艾家商城</li>
                <li>AiJia</li>
                <li>艾聊</li>
                <li>多看书城</li>
                <li>艾生活艾草</li>
                <li>艾疗</li>
                <li>艾家天猫店</li>
                <li>艾家淘宝直营店</li>
                <li>aijia.com</li>
            </ul>
            <p>aijia.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号</p>
            <p>违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
        </div>
        <div class="bottom_img fl">
            <img src="../../img/truste.png" alt="">
            <img src="../../img/v-logo-1.png" alt="">
            <img src="../../img/v-logo-2.png" alt="">
            <img src="../../img/v-logo-3.png" alt="">
        </div>
    </div>
</div>
<!--遮罩-->
<div class="shade"></div>
<!--弹层-->
<div class="modal">
    <div class="modal-header">
        <span>添加收货地址</span>
        <a href="javascript:;" class="close"></a>
    </div>
    <div class="modal-body">
        <div class="form-box clearfix">
            <form class="address" id="add">
                <input type="text" placeholder="姓名" style="width: 228px;">
                <input type="text" placeholder="手机号" style="width: 228px;">
                <input type="text" id="city" placeholder="选择 省 / 市 / 区 / 街道" style="width: 508px;">
                <textarea placeholder="详细地址"></textarea>
                <input type="text" placeholder="邮政编码" class="zipCode" style="width: 228px;">
                <input type="text" placeholder="地址标签" style="width: 228px;">
                <p class="text" style="font-size: 14px;color: red"></p>
            </form>
        </div>
    </div>
    <div class="modal-footer">
        <a href="javascript:;" class="btn btn-primary save">保存</a>
        <a href="javascript:;" class="btn btn-gray">取消</a>
    </div>
</div>
</body>
</html>
<script>
    $.ajax({
        url:'/user/get_user_info.do',
        type:'post',
        success:function(result){
            var name=result.data.username;
            if(!result.status){
                $('.user_name').html(name);
                $('.quit').click(function(){
                    $.ajax({
                        url:'/user/logout.do',
                        type:'post',
                        success:function(result){
                            if(!result.status){
                                $('.hint').html('');
                                window.location.href='index.html';
                            }
                        }
                    });
                });
                $('.changeInfo').click(function(){
                    window.location.href='change-information.html';
                });
            }
        }
    });
    $('.close').click(function () {
        $('.shade').css('display', 'none');
        $('.modal').slideUp("fast");
    });
    $('.btn-gray').click(function () {
        $('.shade').css('display', 'none');
        $('.address').children().val('');
        $('.modal').slideUp("fast");
    });
    /*地址*/
    $('.address-item-new').click(function () {
        $('.address').children().val('');
        $('.shade').css('display', 'block');
        $('.modal').slideDown("fast");
        _str='add';
    });
    $("#city").click(function (e) {
        SelCity(this, e);
    });
    $('.select a').click(function(){
        $(this).addClass('active').siblings().removeClass('active');
    });
    $.ajax({
        url:'/shipping/list.do',
        data:{
            'pageNum':1,
            'pageSize':20
        },
        success:function(str){
            if(!str.status){
                for(var i=0;i<str.data.list.length;i++){
                    var content='<div class="address-item newadd" id='+str.data.list[i].id+'> <dl> <dt> <em class="uname">'+str.data.list[i].receiverName+'</em> </dt> <dd class="utel">'+str.data.list[i].receiverMobile+'</dd> <dd class="uaddress">'+str.data.list[i].receiverProvince+'- '+str.data.list[i].receiverCity+'-'+str.data.list[i].receiverDistrict+'<p style="text-overflow: ellipsis; overflow: hidden;white-space:nowrap;">'+str.data.list[i].receiverAddress+'</p>('+str.data.list[i].receiverZip+')</dd> </dl> <div class="actions"> <a href="javascript:;" class="modify revamp">修改</a> <a href="javascript:;" class="modify del">删除</a> </div> </div>';
                    $('.user-address-list').append(content);
                }
                $('.newadd').click(function(){
                    $('.newadd').removeClass('active');
                    $(this).addClass('active');
                    user_address_id=$(this).attr('id');

                });
                delect();
                modification();
            }
        },error:function(){
        }
    });
    function delect(){
        $('.del').click(function () {
            var del=$(this).parent().parent();
            var shId=parseInt($(this).parent().parent().attr('id'));
            $.ajax({
                url:'/shipping/del.do',
                data:{
                    'shippingId':shId
                },
                success:function(str){
                    if(!str.status){
                        del.remove();
                        alert(str.data);
                    }
                },
                error:function(){
                }
            });
        });
    };
    var shId_reva;
    function modification(){
        $('.revamp').click(function(){
            _str='revamp';
            $('.text').html('');
            shId_reva=parseInt($(this).parent().parent().attr('id'));
            $.ajax({
                url:'/shipping/select.do',
                data:{
                    'shippingId':shId_reva
                },
                success:function(str){
                    if(!str.status){
                        $('.shade').css('display', 'block');
                        $('.modal').slideDown("fast");
                        $('.modal-header span').html('修改收货地址');
                        $('#add input').eq(0).val(str.data.receiverName);
                        $('#add input').eq(1).val(str.data.receiverMobile);
                        $("#city").val(str.data.receiverProvince+'-'+str.data.receiverCity+'-'+str.data.receiverDistrict);
                        $('#add textarea').val(str.data.receiverAddress);
                        $('#add input').eq(3).val(str.data.receiverZip);
                    }
                }
            });

        });
    };
    var _str;
    $('.save').click(function(){
        if(!$('#add input').eq(0).val()||!$('#add input').eq(1).val()||!$('#city').val()||!$('.zipCode').val()||!$('#add textarea').val()){
            $('.text').html('填写完整');
            return;
        }
        if($('.zipCode').val().length!=6){
            $('.text').html('填入正确的邮政编码');
            return false;
        }
        var reg=/^1\d{10}$/;
        if(!reg.test($('#add input').eq(1).val())){
            $('.text').html('填入正确的手机号');
            return false;
        }
        if(_str=='add'){
            $.ajax({
                url:'/shipping/add.do',
                data:{
                    'receiverName':$('#add input').eq(0).val(),
                    'receiverMobile':$('#add input').eq(1).val(),
                    'receiverProvince':$('#add input').eq(5).val(),
                    'receiverCity':$('#add input').eq(4).val(),
                    'receiverDistrict':$('#add input').eq(3).val(),
                    'receiverAddress':$('#add textarea').val(),
                    'receiverZip':$('#add input').eq(6).val()
                },
                success:function(str){
                    if(!str.status){
                        var shippingId=str.data.shippingId;
                        var content='<div class="address-item newadd" id='+shippingId+'> <dl> <dt> <em class="uname">'+$('#add input').eq(0).val()+'</em> </dt> <dd class="utel">'+$('#add input').eq(1).val()+'</dd> <dd class="uaddress">'+$('#add input').eq(2).val()+' <p style="text-overflow: ellipsis; overflow: hidden;white-space:nowrap;">'+$('#add textarea').val()+' ('+$('#add input').eq(6).val()+')</dd> </dl> <div class="actions"> <a href="javascript:;" class="modify revamp">修改</a> <a href="javascript:;" class="modify del">删除</a> </div> </div>';
                        $('.user-address-list').append(content);
                        $('.shade').css('display', 'none');
                        $('.modal').slideUp("fast");
                        $('.newadd').click(function(){
                            $('.newadd').removeClass('active');
                            $(this).addClass('active');
                            user_address_id=$(this).attr('id');
                        });
                        delect();
                        modification();
                    }else{
                        alert("添加失败");
                    }
                },
                error:function(){
                }
            });
        }else{
            var address= $("#city").val();
            var arr=address.split('-');
            $.ajax({
                url:'/shipping/update.do',
                data:{
                    id:shId_reva,
                    'receiverName':$('#add input').eq(0).val(),
                    'receiverMobile':$('#add input').eq(1).val(),
                    'receiverProvince':arr[0],
                    'receiverCity':arr[1],
                    'receiverDistrict':arr[2],
                    'receiverAddress':$('#add textarea').val(),
                    'receiverZip':$('.zipCode').val()
                },
                success:function(str){
                    console.log(str);
                    if(!str.status){
                        $('.shade').css('display', 'none');
                        $('.modal').slideUp("fast");
                        location.reload();
                    }
                }
            });
        }

    });
    //存储 地址id
    var user_address_id;

    //去结算
    $('.go_pay').click(
        function(){
            if(!user_address_id){
                alert('请选择地址');
                return;
            }
            $.ajax({
                url:'/order/create.do',
                data:{
                    'shippingId':user_address_id
                },
                type:'post',
                success:function(res){
                    if(res.status){
                        alert(res.msg);
                    }else{
                        var payment=res.data.orderNo;
                        var cookietime = new Date();
                        var date = new Date();
                        cookietime.setTime(date.getTime() + (24 * 60 * 60 * 1000));
                        $.cookie('payment', payment , { path: '/', expires: cookietime});
                        window.location.href = "payindent.html";
                    }

                },
                error:function(){

                }
            })
        }
    );
    $.ajax({
        url:'/cart/list.do',
        type:'post',
        success:function(res){
            var act_count=0;
            var indent_list=res.data.cartProductVoList;
            var arr=[];
            $.each(indent_list,function(index,val){
                if(val.productChecked){
                    arr.push(val);
                }
            });
            $.each(arr,function(index,val){
                $('.indent_box_i').append('<div class="indent clearfix"><img class="fl" src="'+res.data.imageHost+val.productMainImage+'" alt=""><p class="fl indent_name">'+val.productName+'</p><ul class="fr"><li >'+val.productPrice+'元×'+val.quantity+'</li><li>有货</li><li class="indent_pri">'+val.productTotalPrice+'元</li></ul></div>');
                act_count+=val.quantity;
            });

            $('.act_count').html(act_count+'件');
            $('.total_price').html(res.data.cartTotalPrice+'元');

            $('.total_price_z').html(res.data.cartTotalPrice+'<em>元</em>');
        },
        error:function(){

        }
    })

//    $('.user-address-list .newadd').click(function(){
//        $(this).addClass('active').siblings().removeClass('active');
//    });
//    $('.btn-primary').click(function(){
//        var content='<div class="address-item newadd" id="1"> <dl> <dt> <em class="uname">'+$('#add input').eq(0).val()+'</em> </dt> <dd class="utel">'+$('#add input').eq(1).val()+'</dd> <dd class="uaddress">'+$('#add input').eq(2).val()+' <br>'+$('#add input').eq(3).val()+' ('+$('#add input').eq(4).val()+')</dd> </dl> <div class="actions"> <a href="javascript:;" class="modify revamp">修改</a> </div> </div>';
//        $('.user-address-list').prepend(content);
//        $('.shade').css('display', 'none');
//        $('.modal').slideUp("fast");
//        $('.del').click(function () {
//            $(this).parent().parent().remove();
//        });
//        $('.user-address-list .newadd').click(function(){
//            $(this).addClass('active').siblings().removeClass('active');
//        });
//    });


</script>